{% stylesheet %}
.top-notice {
  display: block;
  height: 40px;
  font-size: 12px;
  text-align: center;
  line-height: 40px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .top-notice {
    height: 30px;
    line-height: 30px;
  }
}

.header_box {
  position: relative;
}

.header_box .header-nav {
  background-color: var(--bg-color);
  display: flex;
  position: relative;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .header_box .header-nav {
    padding: 0 30px;
  }
}

.header_box .header-nav .header-nav-container {
  color: var(--font-color);
  max-width: var(--general_layout_width);
  margin: 0 auto;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-nav-container {
    padding: 0 15px;
  }
}

.header_box .header-nav .header-nav-left,
.header_box .header-nav .mobile-menu-icon,
.header_box .header-nav .mobile-menu-icon,
.header_box .header-nav .header-nav-content,
.header_box .header-nav .header-nav-right {
  height: 80px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-nav-left,
  .header_box .header-nav .mobile-menu-icon,
  .header_box .header-nav .mobile-menu-icon,
  .header_box .header-nav .header-nav-content,
  .header_box .header-nav .header-nav-right {
    height: 60px;
  }
}

.header_box .header-nav .mobile-menu-icon,
.header_box .header-nav .mobile-search {
  display: none;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .mobile-menu-icon,
  .header_box .header-nav .mobile-search {
    display: flex;
  }
}

.header_box .header-nav .header-logo {
  font-size: 22px;
  font-weight: bold;
  max-height: 100%;
  display: inline-flex;
  align-items: center;
  color: var(--font-color);
}

.header_box .header-nav .header-logo img {
  width: auto;
  height: 60px;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.header_box .header-nav .header-nav-content {
  flex: 1;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-nav-content {
    display: none;
  }
}

.header_box .header-nav .header-menu {
  height: 100%;
  display: flex;
  align-items: center;
}

.header_box .header-nav .header-menu .header-nav-item-parent {
  display: inline-block;
  height: 100%;
  position: relative;
  transform: skew(-10deg);
  z-index: 20;
}

.header_box .header-nav .header-menu .header-nav-item {
  height: 100%;
}

.header_box .header-nav .header-menu .header-nav-item .header-nav-item-make {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #ffb100;
  z-index: 5;
  transition: height 0.25s;
}

.header_box .header-nav .header-menu .header-nav-item .header-nav-item-warp {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  transform: skew(10deg);
  color: var(--font-color);
}

.header_box .header-nav .header-menu .header-nav-item .header-nav-item-warp svg {
  margin-left: 6px;
}

.header_box .header-nav .header-menu .header-nav-item .header-nav-item-warp a {
  color: var(--font-color);
}

.header_box .header-nav .header-menu .header-nav-item:hover .header-nav-item-make {
  height: 100%;
}

.header_box .header-nav .header-menu .header-nav-item:hover .parent-level-ul {
  display: block;
}

.header_box .header-nav .currency_box {
  height: 100%;
  position: relative;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .currency_box {
    display: none;
  }
}

.header_box .header-nav .currency_box .currency_txt {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.header_box .header-nav .currency_box .currency_txt span {
  margin-right: 5px;
}

.header_box .header-nav .currency_box .drop_currency {
  position: absolute;
  top: 80px;
  left: 0;
  padding: 10px;
  width: 120px;
  box-sizing: border-box;
  background: var(--bg-color);
  border: 1px solid #e8e8e8;
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.header_box .header-nav .currency_box .drop_currency a {
  color: var(--font-color) !important;
}

.header_box .header-nav .currency_box .drop_currency a:hover {
  background: var(--font-color) !important;
  color: var(--bg-color) !important;
}

.header_box .header-nav .currency_box .drop_currency .web-currency {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  margin: 0;
  color: var(--bg-color);
}

.header_box .header-nav .currency_box .drop_currency .web-currency:hover {
  background: var(--bg-color);
  color: var(--font-color);
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .member-icon {
    display: none;
  }
}

.header_box .header-nav .drop_currency_on .drop_currency {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  z-index: 100;
}

.header_box .header-nav .header-nav-right-icon {
  margin-left: 20px;
  line-height: 1;
  position: relative;
}

.header_box .header-nav .header-nav-right-icon svg {
  width: 22px;
  height: 22px;
}

.header_box .header-nav .header-nav-right-icon svg path {
  fill: var(--font-color);
}

.header_box .header-nav .cart-box {
  position: relative;
}

.header_box .header-nav .cart-box span {
  min-width: 20px;
  height: 20px;
  background: #f00b0b;
  display: none;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -20px;
}

.header_box .pop_search {
  position: absolute;
  top: 0;
  left: 100%;
  height: 60px;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  transition: left 0.3s;
}

.header_box .pop_search .header-nav-search-show {
  width: 100%;
}

.header_box .pop_search .header-nav-search .search-input-icon {
  margin: 0 10px;
}

.header_box .pop_search .header-nav-search .search-btn {
  width: 62px;
}

.header_box .pop_search .header-nav-search .search-btn svg {
  margin-left: 10px;
}

.header_box .pop_search-show {
  left: 0;
}

.header_box .header-nav-search {
  display: flex;
  align-items: center;
  height: 40px;
  transition: width 0.36s;
  width: 52px;
}

.header_box .header-nav-search .search-input-icon {
  display: inherit;
  line-height: 1;
  margin: 0 20px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.header_box .header-nav-search .search-input {
  flex: 1;
  display: flex;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  transition: background-color 0.36s;
}

.header_box .header-nav-search .search-input input {
  flex: 1;
  height: 40px;
  color: #333;
  background-color: inherit;
}

.header_box .header-nav-search .search-input::before {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-top: 40px solid var(--bg-color);
  border-left: 10px solid transparent;
  border-right: 0 solid transparent;
  content: "";
  z-index: 10;
}

.header_box .header-nav-search .search-btn {
  background: #ffb100;
  color: #fff;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  transition: width 0.36s;
}

.header_box .header-nav-search .search-btn::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-bottom: 40px solid var(--bg-color);
  border-right: 10px solid transparent;
  border-left: 0 solid transparent;
  z-index: 10;
  content: "";
}

.header_box .header-nav-search-hide svg {
  fill: #fff;
}

.header_box .header-nav-search-hide .search-input {
  background-color: var(--bg-color);
}

.header_box .header-nav-search-show {
  width: 420px;
}

.header_box .header-nav-search-show .search-input {
  background-color: #fff;
}

.header_box .header-nav-search-show .search-input-icon path {
  fill: var(--bg-color) !important;
}

.header_box .header-nav-search-show .search-btn {
  width: 72px;
}

.header_box .parent-level-ul {
  position: absolute;
  top: 78px;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  padding: 80px 0;
  display: none;
  z-index: 200;
}

.header_box .parent-level-ul ul {
  display: flex;
  justify-content: center;
}

.header_box .parent-level-ul ul li + li {
  margin-left: 80px;
}

.header_box .parent-level-ul ul .nav-child-a {
  font-weight: 500;
  line-height: 40px;
  font-size: 14px;
  display: block;
  color: var(--font-color);
}

.header_box .parent-level-ul ul .nav-child-a + .nav-child-a {
  margin-top: 30px;
}

.header_box .mobile_menu-punk {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  transition: transform 0.3s;
  transform: translateX(-100%);
}

.header_box .mobile_menu-punk .mobile_menu-clear {
  padding: 15px;
}

.header_box .mobile_menu-punk .mobile_currency {
  padding: 0 15px;
  position: relative;
  display: block;
}

.header_box .mobile_menu-punk .mobile_currency select {
  color: var(--font-color);
  height: 60px;
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  text-align: center;
  font-size: 14px;
  appearance: none;
  position: relative;
  z-index: 100;
}

.header_box .mobile_menu-punk .mobile_currency select option {
  color: red;
}

.header_box .mobile_menu-punk .mobile_menu_wrapper {
  height: 100vh;
  width: 80%;
  background: var(--bg-color);
  overflow-y: auto;
  box-sizing: border-box;
  transition: all 0.3s;
}

.header_box .mobile_menu-punk .mobile_menu_wrapper .mobile_nav-item-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  height: 30px;
  margin-top: -15px;
}

.header_box .mobile_menu-punk .mobile_menu_wrapper .mobile_nav-item {
  display: flex;
  position: relative;
  border-bottom: 1px solid #434343;
}

.header_box .mobile_menu-punk .mobile_menu_wrapper a {
  display: block;
  height: 60px;
  line-height: 60px;
  color: var(--font-color);
  font-size: 14px;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.header_box .mobile_menu-punk .mobile_menu_wrapper .child_mobile_nav {
  background-color: #f7f7f7;
  display: none;
}

.header_box .mobile_menu-punk .mobile_menu_wrapper .child_mobile_nav a {
  color: #000000;
  border-bottom: 1px solid #E8E8E8;
}

.header_box .mobile_menu-show {
  transform: translateX(0);
}

{% endstylesheet %}
{% if section  and section.type == "header" %}{% assign section = section %}{% else %}{% assign section = theme_config.global.sections.header %}{% endif %}
{% assign router = section.router | default : routes.current_route  %}
{% if section.settings.is_index_board and router == "index/index" and section.settings.is_board %}
{% assign showBoard = true %}
{% elsif section.settings.is_index_board == false and section.settings.is_board %}
{% assign showBoard = true %}
{% else %}
{% assign showBoard = false %}
{% endif %}
{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}
<div class="page_container" style="--font-color:{{section.settings.menu_color}};--bg-color:{{section.settings.nav_bg}}">
  {% if showBoard %}
  <a class="top-notice" href="{{ section.settings.board_link.url }}" style="background-color:{{ section.settings.board_bg }};color: {{ section.settings.board_font }};">{{ section.settings.board_text }}</a>
  {% endif %}
  <div class="header_box" style="background-color:{{ section.settings.nav_bg }}">
   
    <div class="header-nav">
      <div class="header-nav-container">

        <a class="mobile-menu-icon control-mobile_menu" href="javascript:void(0);">
          <svg t="1637129868590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3968" width="22" height="22">
            <path d="M0 160m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.menu_color}}" p-id="3969"></path>
            <path d="M0 480m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.menu_color}}" p-id="3970"></path>
            <path d="M0 800m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.menu_color}}" p-id="3971"></path>
          </svg>
        </a>

        <div class="header-nav-left">
          <a class="header-logo" href="/">
            {% if section.settings.logo_pic.src != '' %}
            <img src="{{ section.settings.logo_pic.src  | image_url:'600x600' }}" alt="{{ section.settings.logo_pic.alt}}">
            {% else %}
            {{ storeConfig.name }}
            {% endif %}
          </a>
        </div>
        <div class="header-nav-content">
          <div class="header-menu">
            {% if header_nav.size > 0 %}
            {% for item in header_nav.nav_item %}
            <div class="header-nav-item">
              <a href="{{item.url_json.url | default:'javascript:;' }}" class="header-nav-item-parent">
                <div class="header-nav-item-make"></div>
                <div class="header-nav-item-warp">
                  <object>
                    {% include "nav_a", nav : item %}
                  </object>
                  <!-- <span>{{item.nav_item_name}}</span> -->
                  {% if item.children %}
                  <svg t="1636003081626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10">
                    <path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path>
                  </svg>
                  {% endif %}
                </div>
              </a>
              {% if item.children %}
              <div class="parent-level-ul">
                <ul>
                  {% for el in item.children %}
                  <li>
                    {% include "nav_a", nav : el, class:"nav-child-a" %}
                    {% for ddItem in el.children %}
                    {% include "nav_a", nav : ddItem, class:"nav-child-a" %}
                    {% endfor %}
                  </li>
                  {% endfor %}
                </ul>
              </div>
              {% endif %}
            </div>
            {% endfor %}
            {% else %}
            <div class="header-nav-item">
              <a href="/" class="header-nav-item-parent">
                <div class="header-nav-item-make"></div>
                <div class="header-nav-item-warp">
                  <span>Home</span>
                </div>
              </a>
            </div>
            <div class="header-nav-item">
              <a href="/collections" class="header-nav-item-parent">
                <div class="header-nav-item-make"></div>
                <div class="header-nav-item-warp">
                  <span>Collections</span>
                </div>
              </a>
            </div>
            <div class="header-nav-item">
              <a href="/search" class="header-nav-item-parent">
                <div class="header-nav-item-make"></div>
                <div class="header-nav-item-warp">
                  <span>Search</span>
                </div>
              </a>
            </div>
            <div class="header-nav-item">
              <a href="/collections/all" class="header-nav-item-parent">
                <div class="header-nav-item-make"></div>
                <div class="header-nav-item-warp">
                  <span>Product</span>
                </div>
              </a>
            </div>
           
            
            {% endif %}
          </div>
          {% if section.settings.is_search %}
          <div class="header-nav-search web-search header-nav-search-hide">
            <form action="/search" onsubmit="return oemsaasSearch('.search_txt')" class="search-input control-all-search">
              <a class="search-input-icon control-search-web" data-type="search">
                <svg t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="22" height="22">
                  <path fill="{{section.settings.menu_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
                </svg>
              </a>
              <input type="text" class="search_txt" name="q" placeholder="{{ section.settings.search_placeholder }}">
            </form>
            <div class="search-btn control-search-web">
              <svg t="1641534932994" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9671" width="22" height="22">
                <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="{{section.settings.menu_color}}" p-id="9672"></path>
              </svg>
            </div>
          </div>
          {% endif %}
        </div>

        <div class="header-nav-right">

          {% if section.settings.is_currency %}
          <div class="currency_box">
            <div class="currency_txt" id="currencyBox">
              <span>{{ currency.standard_code }}</span>
              <svg t="1636003081626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10">
                <path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path>
              </svg>
            </div>
            <ul class="drop_currency" id="currencyCon">
              {% get_currencies limit=100 %}
              {% for list in currencies %}
              <li>
                <a href="javascript:void(0);" class="web-currency" data-type="{{ list.standard_code }}" rel="nofollow">
                  <span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                </a>
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}

          {% if section.settings.is_search %}
          <a class="header-nav-right-icon mobile-search control-mobile-search">
            <svg t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="22" height="22">
              <path fill="{{section.settings.menu_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
            </svg>
          </a>
          {% endif %}

          {% if section.settings.is_member %}
          <a class="header-nav-right-icon member-icon" href="/account/login">
            <svg t="1637129772556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3684" width="22" height="22">
              <path fill="{{section.settings.menu_color}}"
                d="M870.4 916.48v-10.24c-15.36-133.12-107.52-250.88-230.4-307.2 122.88-81.92 153.6-250.88 71.68-373.76C629.76 102.4 460.8 71.68 337.92 153.6s-153.6 250.88-71.68 373.76c20.48 25.6 40.96 51.2 71.68 71.68-128 51.2-215.04 168.96-235.52 302.08V916.48c0 20.48 15.36 40.96 40.96 40.96 20.48 0 35.84-15.36 35.84-35.84 20.48-148.48 143.36-266.24 291.84-276.48h30.72c148.48 10.24 271.36 122.88 291.84 271.36 0 20.48 15.36 35.84 35.84 40.96 25.6-5.12 40.96-20.48 40.96-40.96zM291.84 373.76c0-107.52 87.04-194.56 194.56-194.56 107.52 0 194.56 87.04 199.68 194.56-5.12 102.4-81.92 184.32-184.32 194.56h-30.72c-102.4-10.24-179.2-92.16-179.2-194.56z"
                p-id="3685"></path>
            </svg>
          </a>
          {% endif %}
          <a class="header-nav-right-icon cart-box" {% if page_ca !='cart_list' %} id="cart_icon" {% endif %} href="javascript:void(0);">
            {% include "icon_cart" %}
            <span id="cart_number"></span>
          </a>
        </div>
      </div>
    </div>

   <!-- 搜索 -->
   <div class="pop_search">
    <div class="header-nav-search header-nav-search-show">
      <form class="search-input control-all-search" action="/search" onsubmit="return oemsaasSearch('.search-mobile-input')">
        <button type="submit" class="search-input-icon" href="javascript:void(0);" data-search-input='search-mobile-input'>
          <svg t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="22" height="22">
            <path fill="{{section.settings.menu_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
          </svg>
        </button>
        <input type="text" name="q" class="search-mobile-input" placeholder="{{ section.settings.search_placeholder }}">
      </form>
      <div class="search-btn control-mobile-search">
        <svg t="1641534932994" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9671" width="22" height="22">
          <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="{{section.settings.menu_color}}" p-id="9672"></path>
        </svg>
      </div>
    </div>
  </div>
   

    <!-- 移动端菜单 -->
    <div class="mobile_menu-punk">

      <div class="mobile_menu_wrapper">
        <svg t="1631538204213" class="mobile_menu-clear control-mobile_menu" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1295" width="20" height="20">
          <path
            d="M571.01312 523.776l311.3472-311.35232c15.7184-15.71328 15.7184-41.6256 0-57.344l-1.69472-1.69984c-15.7184-15.71328-41.6256-15.71328-57.34912 0l-311.3472 311.77728-311.35232-311.77728c-15.7184-15.71328-41.63072-15.71328-57.344 0l-1.69984 1.69984a40.0128 40.0128 0 0 0 0 57.344L452.92544 523.776l-311.35232 311.35744c-15.71328 15.71328-15.71328 41.63072 0 57.33888l1.69984 1.69984c15.71328 15.7184 41.6256 15.7184 57.344 0l311.35232-311.35232 311.3472 311.35232c15.72352 15.7184 41.63072 15.7184 57.34912 0l1.69472-1.69984c15.7184-15.70816 15.7184-41.6256 0-57.33888l-311.3472-311.35744z"
            p-id="1296" fill="#FFFFFF"></path>
        </svg>
        <div class="mobile_nav">
          <ul>
            {% if header_nav.size > 0 %}
            {% for item in header_nav.nav_item %}
            <li>
              <div class="mobile_nav-item">
                {% include "nav_a", nav : item %}
                {% if item.children %}<svg t="1636003081626" class="mobile_nav-item-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14">
                  <path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path>
                </svg>{% endif %}
              </div>
              {% if item.children %}
              <ul class="child_mobile_nav">
                {% for el in item.children %}
                <li>
                  <div class="mobile_nav-item" style="border: none;">
                    {% include "nav_a", nav : el %}
                    {% if el.children %}<svg t="1636003081626" class="mobile_nav-item-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14">
                      <path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path>
                    </svg>{% endif %}
                  </div>
                  {% if el.children %}
              <ul class="child_mobile_nav" style="background-color: #fff;">
                {% for three in el.children %}
                <li>
                  <div class="mobile_nav-item" style="border: none;">
                    {% include "nav_a", nav : three %}
                  </div>
                </li>
                {% endfor %}
              </ul>
              {% endif %}
                </li>
                {% endfor %}
              </ul>
              {% endif %}
            </li>
            {% endfor %}
            {% else %}
              <li>
              <div class="mobile_nav-item">
                <a href="/">Home</a>
              </div>
              <div class="mobile_nav-item">
                <a href="/collections">Collections</a>
              </div>
              <div class="mobile_nav-item">
                <a href="/search">Search</a>
              </div>
              <div class="mobile_nav-item">
                <a href="/collections/all">Product</a>
              </div>
              </li>
            {% endif %}
            <li>
                    {% if section.settings.is_member %}
                    {% if customerInfo and customerInfo.email %}
                    <a href="/account">{{ lang.layout.customer.account }}</a>
                    {% else %}
                    <a href="/account/login">{{ lang.layout.customer.login }}</a>
                    <a href="/account/register">{{ lang.layout.customer.create }}</a>
                    {% endif %}
                    {% endif %}
            </li>
          </ul>
        </div>
        {% if section.settings.is_currency %}
        <label class="mobile_currency">
          <svg t="1636003081626" class="mobile_nav-item-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14">
            <path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path>
          </svg>
          <select class="mobile_currency-select">
            {% get_currencies limit=100 %}
            {% for list in currencies %}
            <option value="{{ list.standard_code }}">
              {{ list.standard_code }} : {{ list.symbol_left }}{{ list.symbol_right }}
            </option>
            {% endfor %}
          </select>
        </label>
        {% endif %}
      </div>
    </div>
  </div>




</div>
<script type="text/javascript">
(function(){$(function(){
    $('.mobile_currency-select').val("{{currency.standard_code}}")
// change currency
$("#currencyBox").click(function (e) {
    e.stopPropagation();
    if ($(".currency_box").hasClass("drop_currency_on")) {
        $(".currency_box").removeClass("drop_currency_on");
    } else {
        $(".pop_search").removeClass("pop_search_on");
        $(".currency_box").addClass("drop_currency_on");
    }
});
$(".drop_currency").click(function (e) {
    e.stopPropagation();
});
$(".web-currency").click(function () {
    location.href = moi.setUrlParams(location.href, { currency: $(this).data("type") });
});

$(".mobile_currency-select").change(function (params) {
    location.href = moi.setUrlParams(location.href, { currency: $(this).val() });
});

function switchClass(dom, name) {
    if (dom.hasClass(name)) {
        dom.removeClass(name);
    } else {
        dom.addClass(name);
    }
}

$(".control-search-web").click(function () {
    const showClass = "header-nav-search-show";
    if ($(".web-search").hasClass(showClass)) {
        $(".web-search").removeClass(showClass);
        $(".header-menu").show();

        if ($(this).data("type") === "search") {
            oemsaasSearch(".search_txt");
        }
    } else {
        $(".web-search").addClass(showClass);
        $(".header-menu").hide();
    }
});

$(".pop_search").click(function (e) {
    e.stopPropagation();
});
$(".control-mobile-search").click(function (e) {
    e.stopPropagation();
    switchClass($(".pop_search"), "pop_search-show");
});

$(".control-mobile_menu").click(function (e) {
    e.stopPropagation();
    switchClass($(".mobile_menu-punk"), "mobile_menu-show");
});
$(".mobile_nav-item svg").click(function (e) {
    e.stopPropagation();
    $(this).parent().siblings(".child_mobile_nav").slideToggle();
});

$(".mobile_menu-punk").click(function (e) {
    e.stopPropagation();
});

$(document).click(function () {
    $(".mobile_menu").removeClass("mobile_menu-show");
    $(".pop_search").removeClass("pop_search-show");
    $(".currency_box").removeClass("drop_currency_on");
});

$("#cart_icon").click(function () {
    $(".minicart").addClass("minicart_on");
    const html = $(".minicart").find(".minicart_mid").html();
    if (!html) {
        miniCart();
    }
});

$(".minicart .close_btn").click(function () {
    $(".minicart").removeClass("minicart_on");
});
addCartNum();
})
})()
</script>
{% schema %}
{
	"tag": "",
	"class": "header",
	"is_global": true,
	"name": {
		"zh_CN": "头部"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单导航设置"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "公告栏"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "开启公告栏"
			},
			"id": "is_board",
			"default": true
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "仅首页显示公告栏"
			},
			"id": "is_index_board"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "公告栏文案"
			},
			"id": "board_text",
			"default": "We Free Shipping Worldwide."
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "公告栏链接"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "board_link"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "顶部LOGO与图片"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "logo图片"
			},
			"id": "logo_pic",
			"default": "https://cn01-imgcdn.oemsaas.com/62137/2020/09/12/7/5/756503d9b6b3a77f.png"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "个人中心"
			},
			"id": "is_member",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "搜索"
			},
			"id": "is_search",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "货币切换"
			},
			"id": "is_currency",
			"default": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "搜索底纹"
			},
			"id": "search_placeholder",
			"default": "Search"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏字体"
			},
			"id": "board_font",
			"default": "#333"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏背景"
			},
			"id": "board_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "导航栏背景"
			},
			"id": "nav_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "菜单项字体"
			},
			"id": "menu_color",
			"default": "#1d1f21"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"nav": {
				"id": "",
				"title": ""
			},
			"is_board": true,
			"is_index_board": true,
			"board_text": "We Free Shipping Worldwide.",
			"board_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"logo_pic": {
				"src": "",
				"alt": ""
			},
			"is_member": true,
			"is_search": true,
			"is_currency": true,
			"board_font": "#7e7e7e",
			"board_bg": "#1d1f21",
			"nav_bg": "#000000",
			"search_placeholder": "Search",
			"menu_color": "#ffffff"
		},
		"blocks": []
	}
}
{% endschema %}